<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>未完成工单</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
      .box{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        background-color: #fff;
        height: 50px;
      }
      .box>p{
        padding-left: 5px;
        margin:0;
        padding: 0;
        width: 35%;
        text-align: right;
      }
      .box select{
        margin:0;
        padding: 0;
        width: 50%;
        height: 20px;
      }
    </style>
</head>

<body>
  <div class="box">
    <p>请选择查询区域：</p>
    <select class="" id='sel' onchange="selChange()">
      <!-- 模板引擎 -->
    </select>
  </div>
  <div id="container" style="height:360px;margin-top:10px"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="../script/highcharts.js"></script>
<script type="text/javascript" src="../script/highcharts-3d.js"></script>
<script type="text/template" id="itemslist">
  {{each datas as item i}}
    <option value="{{item.value}}">{{item.name}}</option>
  {{/each}}
</script>
<script type="text/javascript">
    apiready = function() {
      ajaxrd("queryWorkPlaceList", {}, function(ret, err) {
        AddData('itemslist','sel', ret);
        selChange(ret[0].value)
      })
    }
    function selChange(val) {
      ajaxrd("queryNoFinishOrderList", {
        cRegion: document.getElementById("sel").value || val
      }, function(ret, err) {
        var arr = []
        ret.forEach(function(item, index){
          arr.push({
            name: item.worktype,
            y: item.cnt
          })
        })

        Highcharts.chart('container', {
            chart: {

                type: 'pie',
                options3d: {
					enabled: true,
					alpha: 45,
					beta: 0
				}
            },
            colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00',
				 '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
            title: {
                text: '本区域未完成工单情况'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
        				pie: {
        						allowPointSelect: true,
        						cursor: 'pointer',
        						depth: 35,
        						dataLabels: {
        								enabled: true,
        								format: '<b>{point.name}</b>: {point.y}',
        								style: {
        										color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
        								}
        						}
        				}
        		},

            series: [{
                name: '工单数',
                colorByPoint: true,
                data: arr
            }]
        });
      })
    }
</script>
</html>
